<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Earth hour - Skypad</title>
		<meta name="description" content="Want to make your mark on the universe when the world switches off for Earth Hour?">
		<link rel="stylesheet" href="/assets/css/style.css">
		<meta name="viewport" content="width=device-width, initial-scale=0.6, user-scalable=yes">
		<meta property="fb:app_id"      content="250027595026486" /> 
		<meta property="og:type"        content="website" /> 
		<meta property="og:url"         content="{{ url }}" /> 
		<meta property="og:title"       content="{{ title  }}" /> 
		<meta property="og:description" content="{{ description }}" /> 
		<meta property="og:image"       content="{{ fb_image }}" />
		
		<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Expires" content="0">
		<link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,400italic,500,700,900|Bangers' rel='stylesheet' type='text/css'>
		<link rel="shortcut icon" href="/assets/images/favicon.ico" />
	</head>
	<body>
	<input class="color_value" id='color_value'>
		
		<a href="http://www.earthhour.org.uk" target="_blank" id="eh-logo" class="dark"></a>
		<img src="/assets/images/skypad-white.svg" draggable="false" id='skypad-logo' alt="sky pad logo" />
		
		<div class="speech-bubble add-constellation">
			<h3>now draw!</h3>
			<p>click the pencil<br>to start</p>
		</div>
		
		<span class="ff-icon arrows"></span>

		<menu id='info-buttons'>
			
			<!-- <div id='burger'></div>
			<div id='rockon'></div> -->

			<a id='add-constellation' href="#"></a>
			<a id='cancel-selection' href="#"></a>	
			<a href="#" id="app-menu"></a>
			<!-- <a href="http://earthhour.wwf.org.uk/" target="_blank" id="sign-up-earthhour"></a> -->
		</menu>


		<div id="wrapper">
			<div id='intro'>
				<div id="swinging-light-bulb">
					<div id="spot-light"></div>
					<div id="cord"></div>
					<div id="bulb">
						<div class="speech-bubble">
							<h3>click!</h3>
							<p>to turn off the light</p>
						</div>
					</div>
				</div>
				<div id="white-bg">
					<!-- <div class="speech-bubble">
						<h3>29th March</h3>
						<p>at 8:30pm earthlings!</p>
					</div> -->
				</div>
				<hgroup>
					<img src="/assets/images/skypad-black.svg" alt="sky pad logo" />
					<h1>Earth Hour 2014</h1>
					<h2 class="ff-icon-before"><strong>Will you</strong> switch your lights <br> off this Earth Hour?</h2>
					<h3>29th March at 8:30pm earthlings!</h3>
				</hgroup>
			</div>
			
			<div id="fb-root"></div>
			
			<canvas id="myCanvas" resize></canvas>
			
			<div id="input-constellation" class="dialog-panel">
				<h4>almost done!</h4>
                <h3>constellation details ...</h3>
				<div class='form'>
					<div class="field">
				        <label for="input_const_name">i hereby name this constellation:</label>
				        <input  id='input_const_name' name="input_const_name" placeholder="Witty name here" type="text" size="20" autofocus />
				    	<label for="input_username">my rockstar name is:</label>
				        <input type="text" name="input_username" placeholder="Amadeus" id="input_username" size="20" />
				    </div>
				    <div class="field">
				        <label for="color">color of constellation:</label>
				        <input class="color {adjust:false, minV:0.9, valueElement:'color_value', slider:false, pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}" id='color'>
				        <input type="submit" id="bt_save" value="Finished!">
					</div> 
				 </div>
			</div>

			<div id="share" class="dialog-panel">
				<h4>stellar effort!</h4>
                <div class='left'>	
					<h3>To save your cosmological creation to this particular galaxy you’ll need to share!</h3>
					<!-- <img src="/assets/images/whatastareffort.png" /> -->
				</div>
				<div class='right' id="social-buttons"></div>	
	    	</div>

			<div id="controls" class="dialog-panel">
				<div id='redo-selection' class="redo ff-icon"></div>
				<div id='done-selection' class="done ff-icon"></div>
			</div>
			
			<div id="info_burger" class="dialog-panel">
				<!-- <img src="/assets/images/howdy.png" /> -->
				<h4>Skypad is simple.</h4>
				<p><strong>
						Click the pencil to start drawing. <br /></strong>
						Click on any star in our universe to get started.<br />
						Share to save your constellation.  <br /><br />
						And remember to turn off your lights this Earth Hour.   <br /><br />
						Made with some help from our friends at:
				</p>
				<div class="logos">
					<a href="http://google.com" target="_blank"><img src="/assets/images/google_logo.png" /></a>
					<a href="http://www.pentagram.com/" target="_blank"><img src="/assets/images/pentagram_logo.png" /></a>
					<a href="http://www.grumpysailor.com/" target="_blank"><img src="/assets/images/grumpysailor_logo.png" /></a>
				</div>	
			</div>

			<div id="info_rockon">
				<h3><a href="https://earthhourblue.crowdonomic.com/ " target="_blank">Hey Rockstar wanna join earth hour blue and help save our planet?</a></h3>		
			</div>
			
			<div id="panda"><img draggable="false" src="/assets/images/pandanaut.png"/></div>

		</div>

		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=497507737027437";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>

		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

		<script type="text/javascript" src="https://apis.google.com/js/platform.js">{parsetags: 'explicit'}</script>

		<script>
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

			ga('create', 'UA-48814937-1', 'wwf-earth-hour.appspot.com');
			ga('send', 'pageview');
		</script>

		<script src="/assets/libs/Stats.js"></script>
		<script src="/assets/libs/hammer.min.js"></script>
		<script src="/assets/libs/jquery-2.1.0.min.js"></script>
		<script src="/assets/libs/jscolor.js"></script>
		<script src="/assets/libs/paper-full.min.js"></script>
		<script src="/assets/libs/TweenMax.min.js"></script>
		<script src="/assets/libs/moment.min.js"></script>
		<script src="/assets/libs/signals.min.js"></script>
		<script src="/assets/js/models/constellation-item-model.js"></script>
		<script src="/assets/js/models/constellations-model.js"></script>
		<script src="/assets/js/models/star-item-model.js"></script>
		<script src="/assets/js/models/sky-model.js"></script>
		<script src="/assets/js/views/constellations-view.js"></script>
		<script src="/assets/js/views/constellation-item-view.js"></script>
		<script src="/assets/js/views/sky-view.js"></script>
		<script src="/assets/js/views/share-view.js"></script>
		<script src="/assets/js/views/intro-view.js"></script>
		<script src="/assets/js/views/controls-view.js"></script>
		<script src="/assets/js/views/panda-view.js"></script>
		<script src="/assets/js/main.js"></script>
	</body>
</html>
 